<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>项目属性排序 增长 收缩</title>
		<style>
			.box {
				background-color: yellow;
				display: flex;
			}
			.box>div , .example {
				width: 200px;
				height: 200px;
				border: 2px solid red;
				font-size: 30px;
			}
			/* 01 项目排序 */
			.item3 {
				order: -1; /*数字越小越靠前*/
			}
			.item1 {
				order: 0; /*默认是0*/
			}
			.item2 {
				order: 1; /*数字越大越靠后*/
			}

			/* 02 项目的增长 */
			/* 第1次：4 5两个项目的 flex-grow的值都为1 效果:4 5均分所有剩余空间 */
			.item4 {
				flex-grow: 1;
			}
			.item5 {
				flex-grow: 1;
			}

			/* 第2次，三个flex-grow的值分别为1 2 3
			 效果：2 3 4按照1:2:3的比例均分剩余空间，也就是各占父容器剩余空间的 1/6 2/6 3/6*/
			.item4 {
				flex-grow: 1;
			}
			.item5 {
				flex-grow: 2;
			}
			.item6 {
				flex-grow: 3;
			}

			/* 03 项目的收缩
			注意:需得父容器空间不足时,才会压缩！ */
			.item3 {
				/* 父容器空间不足时，本元素也不会压缩 */
				flex-shrink: 0;
			}
			.item1 {
				/* 其它项目的压缩比例为1，本元素压缩比例为2 */
				flex-shrink: 2;
			}
			.item2 {
				/* 默认值,压缩比例为1 */
				flex-shrink: 1;
			}
		</style>
	</head>
	<body>
		<div class="example">参考大小200px</div>
		<div class="box">
			<div class="item1">01</div>
			<div class="item2">02</div>
			<div class="item3">03</div>
			<div class="item4">04</div>
			<div class="item5">05</div>
			<div class="item6">06</div>
		</div>
	</body>
</html>